<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<script type="text/javascript" src="/js/modules/exporting.js"></script>
<div>
    <div id="container" style="height: 500px; width: 550px; padding: 10px"></div>
    <div style="position: absolute;left: 620px; top: 0px; width: 200px;">
        <div id="resultado_lista" style="border-radius: 5px; box-shadow: 0 0 3px 3px #DDDDDD; width:320px; padding: 10px;">
            <div>
                <h2>Parámetros de simulación</h2>
                <table width="100%">
                    <tr>
                        <td align="center">
                            <div style="font-size: 10px;">
                                Promedio Mínimo<br>
                                <input type="text" value="4.5" name="promedio_min" id="promedio_min" size="4">
                                <div id="promedio_min_error">

                                </div>
                            </div>
                        </td>
                        <td align="center">
                            <div style="font-size: 10px;">
                                Nota Máxima mínima
                                <br>
                                <input type="text" value="6.0" name="maximo_min" id="maximo_min" size="4">
                                <div id="maximo_min_error">

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <div style="font-size: 10px;">
                                Promedio Máximo
                                <br>
                                <input type="text" value="5.5" name="promedio_max" id="promedio_max" size="4">
                                <div id="promedio_max_error">

                                </div>
                            </div>
                        </td>
                        <td align="center">
                            <div style="font-size: 10px;">
                                Nota Máxima máxima
                                <br>
                                <input type="text" value="6.8" name="maximo_max" id="maximo_max" size="4">
                                <div id="maximo_max_error">

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <button onclick="simular()" style="">
                                Simular
                            </button>
                            <button onclick="pararSimular()" style="">
                                Parar Simulación
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <h2>Valores</h2>
                <table class="tabla_resultados">
                    <tr>
                        <td>

                        </td>
                        <th>
                            Promedio Actual
                        </th>
                        <th>
                            Maximo Actual
                        </th>
                    </tr>
                    <tr>
                        <th>
                            Nota
                        </th>
                        <td id="nota_promedio_actual">
                            #
                        </td>
                        <td id="nota_maximo_actual">
                            #
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Puntaje Final
                        </th>
                        <td id="puntaje_promedio_actual">
                            #
                        </td>
                        <td id="puntaje_maximo_actual">
                            #
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    .tabla_resultados{
        border:1px solid #DDDDDD;
        width:100%;
        font-size: 10px;
        border-collapse: collapse;
    }
    .tabla_resultados th{
        font-size: 10px;
        border:1px solid #DDDDDD;
    }
    .tabla_resultados td{
        font-size: 12px;
        border:1px solid #DDDDDD;
    }
.highcharts-title
    {
        font-size: 8px;
    }
</style>
<script>


    var chart;
    var interval;


    $(document).ready(function() {
	Highcharts.setOptions({
		global: {
			useUTC: false
		}
	});

	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			type: 'line',
			marginRight: 10
		},
		title: {
			text: 'Simulación Ranking'
		},
		xAxis: {
			title: {
				text: 'Nota promedio enseñanza media'
			},
			tickPixelInterval: 100

		},
		yAxis: {
			title: {
				text: 'Puntaje'
			},
			plotLines: [{
				value: 0,
				width: 0.2,
				color: '#808080'
			}]
		},
		tooltip: {
                     formatter: function() {
                               return '<b>'+ this.point.name +'</b><br/>' +
                           this.x +': '+ this.y +' puntos';
                     }
		},
		legend: {
			enabled: true
		},
		exporting: {
			enabled: false
		},
		plotOptions: {
			line: {
				dataLabels: {
					enabled: true
				},
				enableMouseTracking: false
			}
		},
		series: [{
			name: 'Ranking',
			data: []
		},
                {
			name: 'NEM',
			data: [[4,notaToNem(4,"H1")],[7,notaToNem(7,"H1")]]
		}]
	});
    });

    function simular() {
        $("#promedio_min_error").html("");
        $("#promedio_max_error").html("");
        $("#maximo_min_error").html("");
        $("#maximo_max_error").html("");
        var ok = true;
        if(!validar("promedio_min","promedio_min_error")){
            ok=false;
        }
        if(!validar("promedio_max","promedio_max_error")){
            ok=false;
        }
        if(!validar("maximo_min","maximo_min_error")){
            ok=false;
        }
        if(!validar("maximo_max","maximo_max_error")){
            ok=false;
        }
        if(ok==true){}
        else{
            return false;
        }

        var promedio_min = parseFloat($("#promedio_min").val());
        var promedio_max = parseFloat($("#promedio_max").val());
        var maximo_min = parseFloat($("#maximo_min").val());
        var maximo_max = parseFloat($("#maximo_max").val());
        var rama = "H1";

        //alert(promedio_min + "/" + promedio_max + "/" + maximo_min + "/" +maximo_max);

        var array_curvas = new Array(100);


        margen_promedio = ( promedio_max - promedio_min ) / 100;
        margen_maximo = ( maximo_max - maximo_min ) / 100;

        var nota_min;
        var nota_max;

        for(var i=0; i<100; i++){
            nota_min = margen_promedio*i+promedio_min;
            nota_max = margen_maximo*i+maximo_min;

            //alert ("Nota Min: " + nota_min + "Margen promedio: " + margen_promedio);

            array_curvas[i] = [
                                [ 4 , Math.round(notaToNem(4,rama))] ,
                                [ nota_min, Math.round(notaToNem(nota_min,rama)) ],
                                [ nota_max, Math.round(nuevoMaximo(nota_max,rama)) ],
                                [ 7 , 850 ]
                            ];
        }

        //console.log(array_curvas);
        // set up the updating of the chart each second
        var series = chart.series[0];
        var j = 0;
        //console.log(array_curvas[100])
        interval = setInterval(function() {
            if(j < 100){

                $("#nota_promedio_actual").html(Math.round(array_curvas[j][1][0]*10,1)/10) ;
                $("#nota_maximo_actual").html(Math.round(array_curvas[j][2][0]*10,1)/10);
                $("#puntaje_promedio_actual").html(array_curvas[j][1][1]);
                $("#puntaje_maximo_actual").html(array_curvas[j][2][1]);

                series.setData(array_curvas[j]);
                j++;
            }
            else{
                //alert(2);
                clearInterval(interval);
            }
        }, 100);
    }
    function pararSimular(){
        clearInterval(interval);
    }
    
    function notaToNem(nota,rama){
        if(rama == "T"){
            puntaje_minimo = 213;
            puntaje_maximo = 825;
        }
        else if(rama == "H2"){
            puntaje_minimo = 218;
            puntaje_maximo = 824;
        }
        else{
            puntaje_minimo = 208;
            puntaje_maximo = 826;
        }
        return (nota-4)*(puntaje_maximo - puntaje_minimo)/(7-4)+puntaje_minimo;
    }
    function nuevoMaximo(nota_maxima,rama){
        var puntaje_maximo = notaToNem(nota_maxima,rama);
        if(850 - puntaje_maximo > 150){
            puntaje_maximo = notaToNem(nota_maxima,rama) + 150;
        }
        else{
            puntaje_maximo = 850;
        }
        return puntaje_maximo;
    }
    function mandar(){
        document.getElementById('error').innerHTML = '';
        callAction("resultado_puntaje","<?php echo url_for("turanking/calcular"); ?>","form");
    }

    function validar(input_id,div_error){

        var valor = $('#'+input_id).val();

        if(valor != ""){
            var separados = valor.split("");

            condiciones = new Array(4);

            if(isInteger(separados[0])){
                if(separados[0] >= 4 && separados[0] <= 7){
                    condiciones[0] = true;
                }
                if(separados[1] == null){
                    mandar();
                }
            }
            else{
                condiciones[0] = false;
            }
            if(separados[1] == ',' || separados[1] == '.'){
                condiciones[1] = true;
            }
            else{
                condiciones[1] = false;
            }
            if(isInteger(separados[2])){
                condiciones[2] = true;
            }
            else{
                condiciones[2] = false;
            }
            if(separados.length > 3){
                if(isInteger(separados[3])){
                    condiciones[3] = true;
                }
                else{
                    condiciones[3] = false;
                }
            }
            else if(separados.length < 4){
                condiciones[3] = true;
            }

            if(condiciones[0] && condiciones[1] && condiciones[2] && condiciones[3]){
                return true;
            }
            else{
                document.getElementById(div_error).innerHTML = '<span style="color: red">Valor inválido.</span>';
                return false;
            }
        }
    }


    function isInteger(s) {
        return (s.toString().search(/^-?[0-9]+$/) == 0);
    }
</script>
<?php
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

?>

